<!--
  文件描述：
  创建时间：2025/2/17 15:03
  创建人：FanHao
-->
<template>
  <div class="module-content">
    <div class="left-module-content">
      {{ title }}
    </div>

    <div class="right-module-content">
      <span class="quantity">
        {{ value }}
      </span>
      <span class="unit">
        {{ unit }}
      </span>
    </div>
  </div>

</template>

<script>
export default {
  props: {
    title: {
      type: String,
      default: '数据容器'
    },
    value: {
      type: String,
      default: '0'
    },
    unit: {
      type: String,
      default: '场'
    }
  },
  data() {
    return {};
  },
  methods: {}
}
</script>
<style>
.module-content {
  width: 120px;
  height: 30px;
  border: #2d447a solid 3px;
  border-radius: 5px;
  display: flex;
}

.left-module-content, .right-module-content {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 100%;
}

.left-module-content {
  width: 60%;

}

.right-module-content {
  width: 40%;

  color: #2d447a;
  background-color: #849BD2;

}

.quantity,
.unit {
}
</style>